<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <input type="text" name="username" placeholder="请输入用户名" id="username">
    <span id="usernameSpan"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <button>提交</button>
</form>
<!--  导入axios类库  -->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">
    /*
        说明：
            1.后台地址url："http://localhost:8080/registerServlet"
            2.后台需要根据key即参数名是username来获取前端提交的用户名数据
            3.后台已经存在的用户名是："岩岩"
     */
    //1.给用户名输入框绑定离焦事件onblur
    document.getElementById("username").onblur=function(){
        //2.在离焦事件的匿名函数体中获取用户名输入框的值
        let usernameValue = document.getElementById("username").value;
        //3.向后台服务器发送AJAX异步请求, 携带获取用户名的值, 用户名的值作为请求参数
        //username=${usernameValue} 这里等号左边必须是username,因为后台就是根据username这就键来作为右边的请求参数
        axios.post("http://localhost:8080/registerServlet", `username=${usernameValue}`)
             .then(resp => {
                //resp.data : 后台服务器响应的数据
                //console.log(resp.data);
                if(resp.data){
                    //resp.data的值是true(可以注册)
                    //给<span id="usernameSpan">✔恭喜,该用户名可以注册</span>
                    document.getElementById("usernameSpan").innerHTML="✔恭喜,该用户名可以注册";
                    document.getElementById("usernameSpan").style.color="green";
                } else {
                    //resp.data的值是false(不可以注册)
                    //给<span id="usernameSpan"></span>
                    document.getElementById("usernameSpan").innerHTML="该用户名已存在";
                    document.getElementById("usernameSpan").style.color="red";
                }
             });
    }
    
    
    

</script>
</body>

</html>